<template>
	<view class="vocabulary_test_box">
		<view class="container">
			<view class="progress">
				<progress-bar :learned="wordIndex" :total="testList.length" :showTitle="false"></progress-bar>
			</view>
			<view class="word_box">
				<view class="word_title_box">
					<view class="word_title1">{{ wordInfo.word }}</view>
					<view class="word_title2 flex_ac">
						<text>[{{ wordInfo.phonetic }}]</text>
						<uni-icons type="sound-filled" size="18" color="#7c7c7c"></uni-icons>
					</view>
				</view>
				<view class="list_box">
					<view :class="['list_item', interpretationIndex === index ? (isCorrect ? 'correct' : 'error') : '']" v-for="(item, index) in wordInfo.options" :key="index" @tap="selectInterpretation(item, index)">{{ item }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import progressBar from '@/components/progressBar/progressBar.vue'
	import { getWordList,getVocabulary } from '@/api/vocabulary/vocabulary'
	export default {
		components: {
			progressBar
		},
		data() {
			return {
				wordIndex: 0,
				wordInfo: {},
				interpretationIndex: null,
				isCorrect: false,
				answerList:[
					{
						school:"elementarySchool",
						num:0
					},
					{
						school:"middleSchool",
						num:0
					},
					{
						school:"highSchool",
						num:0
					},
					{
						school:"collegeSchool",
						num:0
					},
				],
				testList: [
					{
						word: 'transport',
						phonetic: 'ˈtrænspɔːrt',
						options: [
							'prep.向；趋向；对于；接近',
							'vt.运输；运送 n.运送；运输；运输机',
							'v.淋浴 n.淋浴器；淋浴间',
							'n.体育运动'
						],
						answer: 'vt.运输；运送 n.运送；运输；运输机',
					},
					{
						word: 'reading',
						phonetic: 'ˈriːdɪŋ',
						options: [
							'n.应用，申请，应用程序',
							'n.阅读，朗读，读物；adj.阅读的',
							'n.乘务员，管理员活动负责人',
							'a.苦的，痛苦的，刺痛的'
						],
						answer: 'n.阅读，朗读，读物；adj.阅读的',
					},
				]
			}
		},
		onLoad() {
			this.getListData()
		},
		methods: {
			goToPage(data) {
				uni.navigateTo({
					url: '/pages/users/completeTest/completeTest?num='+data
				})
			},
			async getListData() {
				await getWordList().then(res=>{
					if (res.code ==200) {
						this.testList = res.data
					}
				})
				this.wordInfo = this.testList[this.wordIndex]
				this.wordInfo.options = [...this.wordInfo.options, '不认识']
				
			},
			 selectInterpretation(data, index) {
				this.interpretationIndex = index
				if (data === this.wordInfo.annotation) {
					this.isCorrect = true
					if(this.wordIndex>=0 && this.wordIndex <15) {
						this.answerList[0].num++
					} else if (this.wordIndex>=15 && this.wordIndex <30) {
						this.answerList[1].num++
					} else if (this.wordIndex>=30 && this.wordIndex <45) {
						this.answerList[2].num++
					} else {
						this.answerList[3].num++
					}
				} else {
					this.isCorrect = false
				}
				setTimeout(() => {
					if (this.wordIndex === this.testList.length - 1) {   //0-49
						console.log("答案列表",this.answerList);
						 getVocabulary(this.answerList).then(res=>{
							if (res.code ==200) {
								uni.setStorageSync('chl',res.data)
								this.goToPage(res.data)
							}
						})
					} else {
						this.wordIndex = this.wordIndex + 1
						this.wordInfo = this.testList[this.wordIndex]
						this.wordInfo.options = [...this.wordInfo.options, '不认识']
						this.interpretationIndex = null
					}
				}, 800)
			}
		}
	}
</script>

<style lang="scss" scoped>
.vocabulary_test_box {
	height: 100vh;
	background: $uni-bg-color-page;
	padding: 30rpx;
	
	.container {
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		
		.word_box {
			text-align: center;
			margin-top: 100rpx;
			
			.word_title_box {
				.word_title1 {
					font-weight: bold;
					font-size: 36rpx;
				}
				
				.word_title2 {
					display: inline-block;
					padding: 6rpx 20rpx;
					margin-top: 20rpx;
					border-radius: 50rpx;
					border: 2rpx solid #d7d7d7;
					font-size: 28rpx;
					
					text {
						margin-right: 10rpx;
					}
				}
			}
			
			.list_box {
				margin-top: 100rpx;
				
				.list_item {
					width: 88%;
					height: 110rpx;
					line-height: 110rpx;
					margin: 36rpx auto;
					background-color: #f2f2f2;
					border-radius: 12rpx;
					box-shadow: 6rpx 6rpx 16rpx #b4b4b4;
					font-size: 28rpx;
					
					&:nth-child(5) {
						opacity: 0.8;
						border: 2rpx solid #8c8888;
					}
				}
				
				.correct {
					background-color: #6ad70294;
				}
				
				.error {
					background-color: #de3a3ab8;
				}
			}
		}
	}
}
</style>
